<template>
  <!-- 进入首页选择页面 -->
  <div class="select">
    <div class="choice">
      <div class="s1">请选择你想探索的课程分类</div>
      <div class="s2">请至少选择一个感兴趣的分类</div>
    </div>
    <!-- 各分类按钮 -->
    <div class="buttons">
      <van-config-provider :theme-vars="themeVars">
        <van-button
          v-for="(item, index) in selectData.list"
          class="button"
          :key="index"
          round
          plain
          :color="box.includes(item) ? '#666ee8' : '#333'"
          @click="handleChangeColor(item)"
        >
          {{ item.buttonContent }}
        </van-button>
      </van-config-provider>
    </div>
    <!-- 选好分类跳转按钮 -->
    <div class="isOk" @click="okToHome">选好了</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Select',
  data() {
    return {
      box: [],
      selectData: {},
      themeVars: {
        buttonDefaultHeight: '4vh',
      },
      // buttonColor:'#666',
    }
  },
  created() {
    axios
      .get('/mock/api/select/list')
      .then((mockData) => {
        this.selectData = mockData.data.data
      })
      .catch(console.error)
  },

  methods: {
    // 点击按钮选中并改变其颜色
    handleChangeColor(e) {
      // this.buttonColor = '#976eec'
      if (this.box.includes(e)) {
        this.box.splice(this.box.indexOf(e), 1)
      } else {
        this.box.push(e)
      }
    },
    okToHome() {
      this.$router.push('/home')
    },
  },
}
</script>

<style lang="less" scoped>
.select {
  margin-top: 10vh;
}
.choice {
  width: 100%;
  height: 80px;
}
.s1 {
  height: 50px;
  margin: 0 auto;
  margin-top: 10px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.s2 {
  height: 30px;
  margin-top: 10px;
  margin: 0 auto;
  font-size: 16px;
  text-align: center;
}
.buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4vh;
  text-align: center;
}
.button {
  margin: 2vh;
}
.isOk {
  margin: 8vh auto;
  text-align: center;
  width: 40vh;
  height: 6vh;
  line-height: 40px;
  color: white;
  border-radius: 20px;
  background-color: #666ee8;
  font-size: 2.8vh;
}
</style>
